<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>腾飞健康管理平台</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div style="float:left; width: 40%;height: 500px; border: #dddddd solid 2px; overflow-y:auto">
        <table class="layui-hide" id="itemList" lay-filter="itemList"></table>
    </div>

    <div style="float: right; width: calc(100% - 4px - 40%); height: 500px;border-top: #dddddd solid 2px; border-bottom: #dddddd solid 2px; overflow-y:auto">
        <div style="width: 100%; height: 6%; border-bottom: #eeeeee solid 1px; line-height: 200%">
            <div style="float:left; padding-left: 5px"><span style="font-size: 10px">检查员：</span><span id="examiner" style="font-size: 10px">未知</span></div>
            <div style="float: right; padding-right: 5px"><span style="font-size: 10px">检查时间：</span><span id="examineTime" style="font-size: 10px">未知</span></div>
        </div>
        <div style="width: 100%; height: 10%; border-bottom: #dddddd solid 2px; text-align: center; line-height: 300%">
            <span id="examineItemName" style="font-size: 20px">无项目</span>
        </div>
        <table id="labExamineResultTable" lay-filter="labExamineResultTable"></table>
    </div>
</div>

<script type="text/javascript" src="lib/layui/layui.js"></script>
<script>
    layui.use(['jquery', 'table', 'form'], function () {
        let $ = layui.jquery;
        let table = layui.table;
        let form = layui.form;


        //获取父页面传递的参数
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r !== null)
                return unescape(r[2]);
            return null;
        };

        let itemTable = table.render({
            elem: "#itemList",
            id: "itemListTableId",
            url: "/getExamineItemTableMsg",
            page: false,
            toolbar: false,
            size: "sm",
            method: "post",
            request: {
                pageName: "currentPageNum",
                limitName: "pageSize"
            },
            response: {
                countName: "totalCount",
                dataName: "data",
                msgName: "msg"
            },
            where: {
                searchBookRegisteInput: getQueryString("examineNumber"),
                examineType: "lab"
            },
            cols: [
                [
                    {field: "fillItemId", hide: true},
                    {field: "examineItemId", hide: true},
                    {field: "id", title: "id", hide: true},
                    {field: "itemName", title: "项目名称", width: 170, align: "center"},
                    {field: "filledStatus", title: "检查状态", width: 130, align: "center", templet: "#filledStatusTple"},
                    {title: "操作", align: "center", templet: "#operationTple"}
                ]
            ],
            done: function (res, curr, count) {
                console.info(res, curr, count);
            }
        });

        table.on("tool(itemList)", function (obj) {
            console.log(obj.data);
            console.log(obj.event);
            $("#examineItemName").html(obj.data.itemName);
            $.ajax({
                url: "/getLabExaminerAndTime",
                dataType: "json",
                data: "examineItemId="+obj.data.examineItemId+"&fillItemId="+obj.data.fillItemId,
                type: "get",
                success: function(responseData){
                    for(let key in responseData){
                        if(key=="examiner"){
                            $("#examiner").text(responseData[key].examinerName);
                        }else if(key == "fillLabItem"){
                            $("#examineTime").text(responseData[key].examineTime);
                        }
                    }
                },
                error: function(){
                    console.log("获取检查信息请求失败！");
                }
            });

            let itemTable = table.render({
                elem: "#labExamineResultTable",
                id: "labExamineResultTableId",
                url: "/getLabExamineResult",
                page: false,
                toolbar: false,
                size: "sm",
                method: "post",
                request: {
                    pageName: "currentPageNum",
                    limitName: "pageSize"
                },
                response: {
                    countName: "totalCount",
                    dataName: "data",
                    msgName: "msg"
                },
                where: {
                    examineItemId: obj.data.examineItemId,
                    fillItemId: obj.data.fillItemId

                },
                cols: [
                    [
                        {field: "numericalOrder", title: "序号", width: 80, align: "center"},
                        {field: "codeName", title: "代码", width: 120, align: "center"},
                        {field: "clauseName", title: "名称", width: 160, align: "center"},
                        {field: "value", title: "结果", width: 100, align: "center"},
                        {field: "referenceValue", title: "参考值", width: 100, align: "center"},
                        {field: "units", title: "单位", align: "center"},
                    ]
                ],
                done: function (res, curr, count) {
                    console.info(res, curr, count);
                }
            });
        });


    });
</script>
<script type="text/html" id="operationTple">
    <div class="layui-btn-container">
        {{# if(!d.filledStatus){ }}
        <span class="layui-btn layui-btn-default layui-btn-xs layui-btn-disabled" disabled="disabled"
              style="padding-right: 5px;margin-right: 5px">查看</span>
        {{# } }}
        {{# if(d.filledStatus){ }}
        <span class="layui-btn layui-btn-default layui-btn-xs " lay-event="see"
              style="padding-right: 5px;margin-right: 5px">查看</span>
        {{# } }}
    </div>
</script>
<script type="text/html" id="filledStatusTple">
    {{# if(!d.filledStatus){ }}
    <span style="color: red">未检查</span>
    {{# } }}
    {{#　if(d.filledStatus){ }}
    <span style="color: green">已检查</span>
    {{# } }}
</script>
</body>
</html>